<template>
    <div class="enter-work-job-publish">
        <div class="job-content">
            <div class="job-header">
                <el-tabs v-model="jobActiveName">
                    <el-tab-pane label="发布职位" name="publish"></el-tab-pane>
                </el-tabs>
                <div class="job-actions">
                </div>
            </div>
            <div class="job-publish-form">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <span class="enterprise-tag">职位信息</span>
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="工作性质" prop="jobNature">
                                <el-radio-group v-model="ruleForm.jobNature">
                                    <el-radio :label="1" value="1">全职</el-radio>
                                    <el-radio :label="2" value="2">实习</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="职位名称" prop="jobTitle">
                                <el-input v-model="ruleForm.jobTitle"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="工作地区" prop="workArea">
                                <el-cascader
                                    v-model="ruleForm.workArea"
                                    :options="areaTreeList"
                                    @change="handleTreeChange"></el-cascader>
                                <!--  <el-select style="width: 100%" v-model="ruleForm.workArea" placeholder="请选择工作地区">
                                      <el-option :label="item.name" :value="item.name" v-for="item in areaList"
                                                 :key="item.code"></el-option>-->
                                <!--                                </el-select>-->
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="行业类别" prop="name">
                                <el-select style="width: 100%" v-model="ruleForm.jobCategory" placeholder="请选择行业类别">
                                    <el-option :label="item.name" :value="item.name" v-for="item in jobCategoryList"
                                               :key="item.code"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所属部门" prop="departmentId">
                                <el-input v-model="ruleForm.departmentId" placeholder="请填写所属部门"></el-input>
                                <!-- <el-select style="width: 100%" v-model="ruleForm.departmentId" placeholder="请选择所属部门">
                                     <el-option label="部门一" value="shanghai"></el-option>
                                     <el-option label="部门二" value="beijing"></el-option>
                                 </el-select>-->
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="薪资待遇" required>
                                <div class="flex-row-start">
                                    <el-form-item prop="salaryStart">
                                        <el-input style="width: 338px" v-model="ruleForm.salaryStart">
                                            <span slot="suffix">K/月</span>
                                        </el-input>
                                    </el-form-item>
                                    <div class="ml10 mr10">-</div>
                                    <el-form-item prop="salaryEnd">
                                        <el-input style="width: 338px" v-model="ruleForm.salaryEnd">
                                            <span slot="suffix">K/月</span>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item class="ml20" label="" prop="isNegotiable">
                                        <el-checkbox-group v-model="ruleForm.isNegotiable">
                                            <el-checkbox :label="1">面议</el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="其他条件" required>
                                <div class="flex-row-start">
                                    <el-form-item prop="education">
                                        <el-select style="width: 145px" v-model="ruleForm.education"
                                                   placeholder="请选择学历">
                                            <el-option :label="item.name" :value="item.id" v-for="(item ,index) in educationList" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item prop="experience" class="ml10">
                                        <el-select style="width: 145px" v-model="ruleForm.experience"
                                                   placeholder="请选择经验">
                                            <el-option :label="item.name" :value="item.id" v-for="(item ,index) in workExperienceList" :key="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item prop="sex" class="ml10">
                                        <el-select style="width: 145px" v-model="ruleForm.sex" placeholder="请选择性别">
                                            <el-option label="性别不限" :value="3"></el-option>
                                            <el-option label="男" :value="1"></el-option>
                                            <el-option label="女" :value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item class="ml10">
                                        <div class="flex-row-start">
                                            <el-form-item prop="ageStart">
                                                <el-input style="width: 100px" v-model="ruleForm.ageStart" placeholder="最小年龄">
                                                </el-input>
                                            </el-form-item>
                                            <div class="ml10 mr10">-</div>
                                            <el-form-item prop="ageEnd">
                                                <el-input style="width: 100px" v-model="ruleForm.ageEnd" placeholder="最大年龄">
                                                </el-input>
                                            </el-form-item>
                                        </div>
                                    </el-form-item>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="职位亮点" required>
                                <div class="flex-row-start">
                                    <el-form-item prop="jobBright">
                                        <el-select style="width: 338px" v-model="ruleForm.jobBright" multiple
                                                   placeholder="请选择职位亮点">
                                            <el-option :label="item.name" :value="item.name"
                                                       v-for="item in jobHighlightsList"
                                                       :key="item.code"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="招聘人数" prop="recruitmentNumber">
                                        <el-input style="width: 338px" v-model="ruleForm.recruitmentNumber"></el-input>
                                    </el-form-item>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="职位描述" prop="jobDesc">
                                <el-input type="textarea" v-model="ruleForm.jobDesc"
                                          :autosize="{ minRows: 4, maxRows: 8}"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="mt25">
                        <!--                        <span class="enterprise-tag">联系方式</span>-->
                        <el-row :gutter="20">
                            <!--  <el-row :gutter="20">
                                  <el-col :span="24">
                                      <el-form-item>
                                          <div class="flex-row-start">
                                              <el-form-item class="single-item" label="">
                                                  <el-radio-group v-model="contactType">
                                                      <el-radio :label="1">使用企业基本资料的联系方式</el-radio>
                                                      <el-radio :label="2">使用新增的联系方式</el-radio>
                                                  </el-radio-group>
                                              </el-form-item>
                                          </div>
                                      </el-form-item>
                                  </el-col>
                              </el-row>
                              <el-row :gutter="20">
                                  <el-col :span="12">
                                      <div class="flex-row-start">
                                          <el-form-item label="联系人" prop="name" required>
                                              <el-input style="width: 250px" v-model="ruleForm2.name"></el-input>
                                          </el-form-item>
                                          <el-form-item class="checkbox-item" label="" prop="baomi">
                                              <el-checkbox-group class="ml20" v-model="ruleForm2.baomi">
                                                  <el-checkbox label="保密" name="1"></el-checkbox>
                                              </el-checkbox-group>
                                          </el-form-item>
                                      </div>
                                  </el-col>
                                  <el-col :span="12">
                                      <div class="flex-row-start">
                                          <el-form-item label="QQ号" prop="date1" required>
                                              <el-input style="width: 335px" v-model="ruleForm.name"></el-input>
                                          </el-form-item>
                                      </div>
                                  </el-col>
                              </el-row>
                              <el-row :gutter="20">
                                  <el-col :span="12">
                                      <div class="flex-row-start">
                                          <el-form-item label="联系电话" prop="name" required>
                                              <el-input style="width: 250px" v-model="ruleForm2.name"></el-input>
                                          </el-form-item>
                                          <el-form-item class="checkbox-item" label="" prop="baomi">
                                              <el-checkbox-group class="ml20" v-model="ruleForm2.baomi">
                                                  <el-checkbox label="保密" name="1"></el-checkbox>
                                              </el-checkbox-group>
                                          </el-form-item>
                                      </div>
                                  </el-col>
                                  <el-col :span="12">
                                      <div class="flex-row-start">
                                          <el-form-item label="联系邮箱" prop="name" required>
                                              <el-input style="width: 250px" v-model="ruleForm2.name"></el-input>
                                          </el-form-item>
                                          <el-form-item class="checkbox-item" label="" prop="baomi">
                                              <el-checkbox-group class="ml20" v-model="ruleForm2.baomi">
                                                  <el-checkbox label="保密" name="1"></el-checkbox>
                                              </el-checkbox-group>
                                          </el-form-item>
                                      </div>
                                  </el-col>
                              </el-row>
                              <el-row :gutter="20">
                                  <el-col :span="24">
                                      <div class="flex-row-start">
                                          <el-form-item label="公司座机" prop="name">
                                              <el-input style="width: 250px" v-model="ruleForm2.name"></el-input>
                                          </el-form-item>
                                          <el-form-item class="checkbox-item" label="" prop="baomi">
                                              <el-checkbox-group class="ml20" v-model="ruleForm2.baomi">
                                                  <el-checkbox label="保密" name="1"></el-checkbox>
                                              </el-checkbox-group>
                                          </el-form-item>
                                      </div>
                                  </el-col>
                              </el-row>
                              <el-row :gutter="20">
                                  <el-col :span="24">
                                      <el-form-item label="联系地址" prop="name">
                                          <el-input style="width: 100%" v-model="ruleForm2.name"></el-input>
                                      </el-form-item>
                                  </el-col>
                              </el-row>-->
                            <el-col :span="24" class="mt30">
                                <el-form-item>
                                    <el-button :loading="submitting" :disabled="submitting || !isCheck" type="primary"
                                               @click="submitForm('ruleForm')"
                                               icon="el-icon-s-promotion">发布职位
                                    </el-button>
                                    <span class="ml10">您的帐号可同时发布 30 个职位</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import {
    areaList,
    areaTreeList, belongsIndustryList,
    educationList,
    jobCategoryList,
    jobHighlightsList,
    workExperienceList
} from '@/api/base'
import { addOrUpdatePosition, detail } from '@/api/enterprise/work/job'
import { checkResponse } from '@/utils'
import {getAuthenticationStatus} from "@/api/enterprise/work/account";
import MessageBox from "element-ui/packages/message-box/src/main";

export default {
    name: 'enterpriseWorkJob',
    components: {},
    data() {
        return {
            submitting: false,
            jobActiveName: 'publish',
            isCheck: false,
            ruleForm: {
                'ageEnd': undefined,
                'ageStart': undefined,
                'companyId': 0,
                'createTime': '',
                'departmentId': '',
                'education': 0,
                'experience': 0,
                'id': 0,
                'isNegotiable': 0,
                'jobBright': '',
                'jobCategory': '',
                'jobDesc': '',
                'jobNature': 1,
                'jobTitle': '',
                'recruitChannel': '',
                'recruitmentNumber': undefined,
                'salaryEnd': undefined,
                'salaryStart': undefined,
                'sex': 3,
                'updateTime': '',
                'workArea': [],
                'age': 0
            },
            ruleForm2: {
                'name': '',
                'baomi': 0
            },
            rules: {
                jobNature: [
                    { required: true, message: '请选择工作性质', trigger: 'blur' }
                ],
                workArea: [
                    { required: true, message: '请选择工作地区', trigger: 'blur' }
                ],
                jobTitle: [
                    { required: true, message: '请输入职位名称', trigger: 'blur' }
                ],
                jobCategory: [
                    { required: true, message: '请输入行业类别', trigger: 'change' }
                ],
                jobDesc: [
                    { required: true, message: '请输入职位描述', trigger: 'change' }
                ]
            },
            contactType: 1,
            areaList: [],
            areaTreeList: [],
            jobHighlightsList: [],
            jobCategoryList: [],
            educationList: [],
            workExperienceList: [],
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.authenticationStatus()
            this.getAreaTreeList()
            this.getAreaList()
            this.getJobHighlightsList()
            this.getJobCategoryList()
            this.getEducationList()
            this.getWorkExperienceList()
            if (this.$route.query.id) {
                this.ruleForm.id = this.$route.query.id
                this.getDetail()
            }
        },
        getDetail() {
            detail(this.ruleForm.id).then(res => {
                if (checkResponse(res)) {
                    let data = res.datas
                    if (data.ageStart) {
                        data.age = 1
                    }
                    if (data.jobBright) {
                        data.jobBright = data.jobBright.split(',')
                    }
                    Object.assign(this.ruleForm, data)
                    this.ruleForm.workArea = [parseInt(data.workArea), parseInt(data.workDistrict)]
                }
            })
        },
        getAreaList() {
            areaList().then(res => {
                this.areaList = res
            })
        },
        getAreaTreeList() {
            areaTreeList().then(res => {
                let formatList = []
                let tempData = []
                res.datas[0].children.forEach(((v, k) => {
                    tempData = {
                        value: v.id,
                        label: v.name,
                        children: []
                    }
                    if (v.children) {
                        v.children.forEach((v2, k2) => {
                            tempData.children.push(
                                {
                                    value: v2.id,
                                    label: v2.name
                                }
                            )
                        })
                    }
                    formatList.push(tempData)
                }))
                this.areaTreeList = formatList
            })
        },
        getJobHighlightsList() {
            jobHighlightsList().then(res => {
                this.jobHighlightsList = res
            })
        },
        getJobCategoryList() {
            belongsIndustryList().then(res => {
                this.jobCategoryList = res
            })
        },
        getEducationList() {
            educationList().then(res => {
                res.unshift({id: 0, name: '无要求'})
                this.educationList = res
            })
        },
        getWorkExperienceList() {
            workExperienceList().then(res => {
                res.unshift({id: 0, name: '经验不限'})
                this.workExperienceList = res
            })
        },
        submitForm(formName) {
            let app = this
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    app.save()
                } else {
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        handleTreeChange(value) {

        },
        authenticationStatus() {
            getAuthenticationStatus().then(res => {
                if (res.datas && res.datas.auditStatus == 1) {
                    this.isCheck = true;
                }else{
                    MessageBox.confirm(
                        '您尚未认证，请前往认证',
                        '系统提示',
                        {
                            confirmButtonText: '点击前往',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }
                    ).then(() => {
                        this.$router.push('/enterprise/account/approve');
                    })
                }
            });
        },
        save() {
            let obj = { ...this.ruleForm }
            obj.isNegotiable = obj.isNegotiable ? 1 : 0
            // if (obj.age == 1) {
            //     obj.ageStart = 18
            //     obj.ageEnd = 30
            // }
            if (obj.ageStart !== undefined && !obj.ageEnd) {
                this.$message.error('最大年龄不能为空');
                return false;
            }
            obj.workDistrict = obj.workArea[1];
            obj.workArea = obj.workArea[0]
            obj.jobBright = obj.jobBright.join(',')
            this.submitting = true
            addOrUpdatePosition(obj).then(res => {
                this.submitting = false
                if (checkResponse(res, true)) {
                    this.$router.push('/enterprise/job')
                }
            })
        }
    }
}
</script>
<style lang="scss">
@import "../../../assets/styles/enterprise/base";

.enter-work-job-publish {
    background: #FFF;
    padding: 10px 20px;

    .job-publish-form {
        padding-right: 40px;
        position: relative;
        color: $text-default;

        .enterprise-tag {
            display: block;
            margin: 10px 0 30px 0;
        }

        .el-form-item__label {
            color: $text-default !important;
        }

        .checkbox-item {
            .el-form-item__content {
                margin-left: 0 !important;
            }
        }
    }
}
</style>
